<?php session_start();?>
<!doctype html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport"
          content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>我最喜爱的汽车在线投票</title>
    <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/3.4.1/css/bootstrap.min.css"
          integrity="sha384-HSMxcRTRxnN+Bdg0JdbxYKrThecOKuH5zCYotlSAcp1+c8xmyTe9GYg1l9a69psu" crossorigin="anonymous">
    <script src="js/jq.js"></script>
    <script src="https://stackpath.bootstrapcdn.com/bootstrap/3.4.1/js/bootstrap.min.js"
            integrity="sha384-aJ21OjlMXNL5UyIl/XNwTMqvzeRMZH2w8c5cRVpzpU8Y5bApTppSuUkhZXN0VxHd"
            crossorigin="anonymous"></script>
</head>
<style>
    h1 {
        text-align: center;
        margin: 30px auto
    }

    .img {
        position: relative;
        margin-bottom: 15px;
    }

    .row img {
        width: 100%
    }

    .img .row {
        position: absolute;
        bottom: 0;
        left: 15px;
        width: 100%;
        background-color: rgba(0, 0, 0, 0.5);
        color: white;
    }

    p {
        margin: 10px;
    }
    .loginInfo{text-align: right;font-size: 14px;font-weight: normal;color: #5c874b;display: block;margin-left: 20px}
</style>

<body>
<script src="js/jq.js"></script>
<script src="layer/layer.js"></script>

<?php
include_once 'conn.php';
$sql = 'select * from carinfo';
$result = mysqli_query($conn,$sql);
?>
<div class="container">
    <?php include_once 'nav.php';?>
    <div class="row">
        <?php
        $i = 1;
        while($info = mysqli_fetch_array($result,MYSQLI_ASSOC)){
        ?>
        <div class="col-xs-6 col-sm-6 col-md-4 col-lg-3">
            <div class="img">
                <?php
                if($_SESSION['loggedUsername']){?>
                    <a href="javascript:showCode(<?php echo $info['id'];?>)"><img src="img/<?php echo $info['carPIC'];?>"></a>
                <?php }else{?>
                    <img src="img/<?php echo $info['carPIC'];?>">
                <?php }
                ?>
                <div class="row">
                    <div class="col-xs-12 col-sm-5 col-md-6 col-lg-5">
                        <p class="text-center"><?php echo $info['carName'];?></p>
                    </div>
                    <div class="col-xs-12 col-sm-7 col-md-6 col-lg-7">
                        <p class="text-center">当前票数：<span id="car<?php echo $info['id'];?>"><?php echo $info['carNum'];?></span></p>
                    </div>
                </div>
            </div>
            <p><?php echo $info['carDesc'];?></p>
        </div>
        <?php
            if($i % 2 == 0){
                //每2行数据添加一个visible-sm-block
                echo '<div class="clearfix visible-sm-block visible-xs-block"></div>';
            }
            if($i % 3 == 0){
                //每3行数据添加一个visible-md-block
                echo '<div class="clearfix visible-md-block"></div>';
            }
            if($i % 4 == 0){
                //每4行数据添加一个visible-lg-block
                echo '<div class="clearfix visible-lg-block"></div>';
            }
            $i++;
        }
        ?>
    </div>
</div>

<script>
    function showCode(id){
        layer.open({
            title:'请输入验证码',
            type: 2,
            area: ['350px'],
            fixed: false, //不固定
            maxmin: false,
            content: 'showCode.php?carID='+id,
            success : function( layero,index){
                //找到当前弹出层的iframe元素
                var iframe = $(layero).find ( 'iframe' );
                console.log(iframe[0].contentDocument.body.offsetWidth);
                //设定iframe的高度为当前iframe内body的高度
                iframe.css('height',iframe[0].contentDocument.body.offsetHeight+10);
                //重新调整弹出层的位置，保证弹出层在当前屏幕的中间位置
                $(layero).css('top',(window.innerHeight - iframe[0].offsetHeight)/2);
            }

        });
    }
    function close(){
        layer.closeAll();
    }
</script>
</body>
</html>